<template>
	<section class="state-page">
		<nav>
			<checkbox-wrapper>
				<Checkbox 
					v-for="(item, index) in checkBoxList" 
					:key="index" 
					:selected="index == checkBoxStateIndex"
					:color="item.color" 
					@click.native="chooseCheckBoxState(index)"
					:title="item.title"/>
			</checkbox-wrapper>
		</nav>
		<div class="">
			<div>
				<pcard></pcard>
			</div>
			<div>
				
			</div>
		</div>
	</section>
</template>	

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import Checkbox from '@/components/checkbox/checkbox.vue'; 
import CheckboxWrapper from '@/components/checkbox/checkbox-wrapper.vue'; 
import Pcard from '@/components/pcard/pcard.vue';
@Component({
	components: {
		Checkbox,
		CheckboxWrapper,
		Pcard
	},
})

export default class PatientState extends Vue {
	checkBoxStateIndex = 0

	checkBoxList = [
		{color: '#7c7b8b', title: '拟手术患者'},
		{color: '#f0c900', title: '出病区'},
		{color: '#5a56ce', title: '等待'},
		{color: '#ff5350', title: '手术中'},
		{color: '#3ebd41', title: '完成'},
		{color: '#ffa2c3', title: '复苏'},
		{color: '#b41bab', title: '观察中'},
		{color: '#ffffff', title: '回到病区'},
		{color: '#00997b', title: '离院'},
		{color: '#000000', title: '取消'},
	]

	chooseCheckBoxState (index: number) {
		this.checkBoxStateIndex = index;
	}
}

</script>

<style lang="scss" scoped>
.state-page{
	padding: 9px 30px;
	margin: 10px;
	border: 1px solid $table_bolder_color;
	.checkbox-wrapper{
		&::after{
			content: '';
			display: block;
			clear: both;
		}
		.scan{
			float: left;
		}
		.scan+.scan{
			margin-left: 25px;
		}
	}
}
</style>
